<template>
  <el-aside width="200px" class="home-aside">
    <el-menu
      :default-active="activePath"
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409eff"
      router
      unique-opened
    >
      <el-submenu
        v-for="item in menuList" :key="item.id"
        :index="item.id + ''"
      >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.authName}}</span>
        </template>
        <el-menu-item
          v-for="subItem in item.children" :key="subItem.id"
          :index="subItem.path"
          @click="saveNavState(subItem.path)"
        >
          <i class="el-icon-menu"></i>
          <span slot="title">{{subItem.authName}}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  name: 'commonAside',
  data () {
    return {
      menuList: [],
      activePath: ''
    }
  },
  created () {
    this.getMenuList()
  },
  methods: {
    async getMenuList () {
      const { data: res } = await this.$axios.get('aside.json')
      if (res.meta.status !== 200) {
        return this.$message.success('获取列表失败')
      }
      this.menuList = res.data
    },
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}
</script>
<style lang="scss" scoped>
.home-aside {
  background: #333744;
  color: #fff;
}
</style>
